<!--
 * Date: 2018年01月02日 09:32:33
 * LastEditors: lvyou
 * LastEditTime: 2019年12月03日 11:15:14
 * FilePath: \youlinweb-master\src\pages\topic\topicdetail\commentsdetail\commentsdetail.vue
 * copyright(c) 2019-2025 版权为浙江双城网络科技集团有限公司所有，违者必究。
 -->
<template>
  <div>
    <ylheader :leftsvg="true" :title="'讨论详情'" :rightmoresvg="isme" @moresvg="deletemycomment"></ylheader>
    <mt-popup
        v-model="isdelete" position="bottom">
      <div style="width: 7.5rem;display: flex;flex-direction: column;align-items: center">
        <div class="delete" @click="deletemycomments">
          <span>删除</span>
        </div>
        <div style="background-color: #f5f5f5;height: 0.1rem;width: 100%"></div>
        <div class="cancle" @click="iscancle">
          <span>取消</span>
        </div>
      </div>
    </mt-popup>

    <mt-popup
      v-model="isreply" position="bottom">
      <div style="width: 7.5rem;display: flex;flex-direction: column;align-items: center">
        <div class="delete" @click="replycom">
          <span>回复</span>
        </div>
        <div style="background-color: #f5f5f5;height: 1px;width: 100%"></div>
        <div v-if="ismyself==true" class="delete" @click="deletereply">
          <span>删除</span>
        </div>
        <div style="background-color: #f5f5f5;height: 0.1rem;width: 100%"></div>
        <div class="cancle" @click="replycancle">
          <span>取消</span>
        </div>
      </div>
    </mt-popup>
    <deletepopup :type="myshenhetype" @candelete="deletetopiccomments" @cancledelete="canaledeteletopiccomments" :isshowdeletepopup="showdelete"  @deleteshow="deleteshow"></deletepopup>
    <div class="loadmore-container" ref="commentsdetailWrapper">
    <div class="loadmore-ul">
      <div  v-if="1 == myJoin" >
        <div v-for="(items,index) in commentdetailtopic" :key="index"  @click="turn2TopicDetail(items.topicId)">
            <commentdetailtopic  :topicimg="items.topicPicture" :abbreviations="items.abbreviations" :followNumber="items.followNumber"
                    :title="items.title" :topictype="items.isShow" :tabId="0" :topicItem="items"></commentdetailtopic>
        </div> 
      </div>

      <div v-for="(item,index) in discuss" style="background-color: white;" :key="index">
        <hotheader :nickname="item.nickName" :avatarimg="item.headImg" :topictime="item.time" :type="headertype" :userType="item.userType" :isTalent="item.isTalent" :pendantType="item.pendantType" :pendantPicUrl="item.pendantPicUrl"></hotheader>
        <commentbody @showImg="popupImg"  :commenttype="null" :commenttext="item.content" :piclength="item.picUrls.length" :picarray="item.picUrls" :isdisplacetype="0" :lanxicontent="item.lanxicontent"></commentbody>
      </div>
      <div style="margin-top: 0.2rem">
        <div class="allcomments">
          <div class="allcommentstitle">全部评论<span style="margin-left: 0.2rem">(<span style="color: #fb685b">{{commentcounts}}</span>)</span><span class="allthumbcount"></span></div>
        </div>
          <div style="background-color: white;padding-bottom: 0.9rem;min-height:80vh;">
            <div class="comment" v-for="(items,index) in commentList" :key="index"> 
              <commentdetailheader :zannum="items.likesNumber" :avaterImg="items.headImg" :name="items.nickName" :time="items.time" :commentindex="index"
                                   :commentdetailisup="items.isGood" @comentdetailthumb="iscomentdetailthumb" @replycomment="replyotherbody" :userType="items.userType" :isTalent="items.isTalent" :pendantType="items.pendantType" :pendantPicUrl="items.pendantPicUrl"></commentdetailheader>
              <commentbody  @showImg="popupImg" :atname="items.atName" :commenttype="items.atName" :commenttext="items.content" :piclength="items.picUrls&&items.picUrls.length"
                           :picarray="items.picUrls" :isdisplacetype="0"
                           @replycomment="replyotherbody" :commentindex="index"></commentbody>
            </div>
          </div>
      </div>
    </div></div>
    <div v-for="(item,index) in discuss" style="background-color: white;" :key="index">
        <div style="position: fixed;bottom: 0;width: 100%;z-index: 1;height: .9rem">
          <div class="bottom-sep"></div>
          <thumb-up :commentindex="index" :topiccommentnum="commentcounts" :thumbupnum="item.likesNumber" :isup="item.isGood" @thumbup="isthumbup"
                    @commentsvgg="clickcomment"></thumb-up>
        </div>
    </div>
        <transition name="fade">
     <div class="modal-img" v-if="popupVisible" @click="popupVisible=false">
       <mt-swipe :auto="100000" style="width: 100%;height: 100vh;position:relative;"
       :continuous="false" 
        :defaultIndex="swiperIndex" :showIndicators="false" >
          <mt-swipe-item v-for="(item,index) in popImg" :key="index" style="height:100vh" >
            <img v-lazy="item" class="swiper-img" />
          </mt-swipe-item>
        </mt-swipe>
      </div>
    </transition>
  </div>
</template>
<script>
import ylheader from "src/components/yl-header.vue";
import hotheader from "src/components/allhot-header.vue";
import commentbody from "src/components/comment-detail-body.vue";
import commentdetailheader from "src/components/commentdetail-header.vue";
import commentdetailtopic from "src/components/topic/hot-topic-commentdetail.vue";
import thumbUp from "src/components/thumb-up.vue";
import api from "src/api/index";
import { Pupup,Cell, Toast,Indicator } from "mint-ui";
import deletepopup from "src/components/deletepopup.vue";
import { loadMore } from "src/components/common/mixin";
export default {
  name:"commentsdetail",
  data() {
    return {
      swiperIndex:0,
      popupVisible:false,
      popImg:'',
      isuptype: 0,
      isdelete: false,
      isreply: false,
      headertype: this.$route.query.type,
      commentList: [],
      discuss: [],
      commentcounts: "0",
      tag: "",
      ismyself: "",
      isme: "",
      page: 1,
      hasmore: true,
      showdelete: false,
      mystatus: "",
      myshenhetype: -1,
      is_r: false,
      showloading: true, //显示加载动画
      preventRepeatReuqest: false, //到达底部加载数据，防止重复加载
      touchend: false,
      commentdetailtopic:[],
      discusslikenumber:"",//赞数目
      myJoin:0,//判断是否从我的消息页面来
    };
  },
  mounted() {
    Indicator.open("加载中...");
    this.myJoin = this.$route.query.myJoin;
    if(this.myJoin==1){
      this.gettopicdetaildata();
    }
    this.topicCommentDetail()
      .then(data => {
        return this.initScroll();
      })
      .then(data => {
        this.$nextTick(() => {
          this.myscroll.refresh();
        });
      });
  },
  watch: {
    
  },
  components: {
    ylheader,
    hotheader,
    commentbody,
    commentdetailheader,
    thumbUp,
    Pupup,
    deletepopup,
    Cell,
    commentdetailtopic
  },
  //mixins: [loadMore],
  methods: {
    //显示图片
    popupImg(data,index){
      console.log(data,index)
      this.swiperIndex = index
      if(typeof data == 'string'){
        data = data.split(',')
      }
       //console.log(data,index)
      this.popImg = data;
      this.popupVisible = true;
      // console.log(this.swiperOne)
      // this.swiperOne.slideTo(index)
    },
    //获取话题详情关注人数等数据
    gettopicdetaildata(){
       let p = new Promise((resolve, reject) => {
         api.Querytopicdetail({ id: this.$route.query.topicId }).then(res => {
            this.commentdetailtopic = res.data.topic
            resolve("获取评论详情话题详情.....");
         })
       })
       return p;
    },
    //获取讨论详情数据
    topicCommentDetail() {
      let p = new Promise((resolve, reject) => {
        const data = {
          page: this.page,
          limit: 10,
          id: this.$route.query.commentId
        };
        //将commentcounts做了修改
        api.QuerytopicCommentDetail(data).then(res => {
          if (res.success) {
            this.currPage = res.data.commentList.currPage;
            this.totalPage = res.data.commentList.totalPage;
            this.discuss = res.data.discuss;
            this.discusslikenumber = res.data.discuss[0].likesNumber;
            this.picAutoOrient(this.page-1,this.discuss);
            this.$util.getlanxidata(this.discuss);
            this.$util.getListUrl(this.discuss);
            this.commentcounts = res.data.discuss[0].commentCount;
            this.commentList = res.data.commentList.list;
            this.$util.getListUrl(this.commentList);
            this.picAutoOrient(this.page-1,this.commentList);
            if (
              res.data.discuss.length > 0 &&
              localStorage.getItem("userId") == this.discuss[0].userId
            ) {
              this.isme = true;
            } else {
              this.isme = false;
            }
            if (res.data.commentList.list.length < 10) {
              this.touchend = true;
            }
            this.hideLoading();
            this.hasmore = res.hasMore;
          }
          resolve("获取讨论详情数据...");
        });
      });
      return p;
    },
    //初始化scroll
    initScroll() {
      let p = new Promise((resolve, reject) => {
        let commentsdetailWrapper = this.$refs.commentsdetailWrapper;
        let _this = this;
        this.$nextTick(() => {
          localStorage.tempPageHeight = document.getElementsByClassName(
            "loadmore-ul"
          )[0].scrollHeight;
          _this.myscroll = new iScroll(commentsdetailWrapper, {
            onScrollMove: function() {
              if (
                this.y <= this.wrapperH - this.scroller.clientHeight - 50 &&
                _this.is_r == false
              ) {
                _this.is_r = true;
                _this.getCommentList().then(data => {
                  _this.scrollRefresh();
                });
              }
            },
            onScrollEnd: function() {},
            onScrollStart: function() {
              if (
                localStorage.tempPageHeight !=
                document.getElementsByClassName("loadmore-ul")[0].scrollHeight
              ) {
                this.refresh();
                localStorage.tempPageHeight = document.getElementsByClassName(
                  "loadmore-ul"
                )[0].scrollHeight;
              }
            }
          });
          setTimeout(() => {
            _this.myscroll.refresh();
          }, 500);
          resolve("初始化scroll");
        });
      });
     Indicator.close();
      return p;
    },
    getCommentList() {
      let p = new Promise((resolve, reject) => {
        this.page = this.currPage + 1;
        const data = {
          page: this.page,
          limit: 10,
          id: this.$route.query.commentId
        };
        api.QuerytopicCommentDetail(data).then(res => {
          if (res.success) {
            this.currPage = res.data.commentList.currPage;
            this.commentList = [
              ...this.commentList,
              ...res.data.commentList.list
            ];
             this.$util.getListUrl(this.commentList);
            this.picAutoOrient(this.page-1,this.commentList);
            if (this.currPage < this.totalPage) {
              this.is_r = false;
            }
          }
          resolve("加载更多...");
        });
      });
      return p;
    },
    scrollRefresh() {
      let p = new Promise((resolve, reject) => {
        this.$nextTick(() => {
          this.myscroll.refresh();
          resolve("刷新...");
        });
      });
      return p;
    },
    hideLoading() {
      this.showloading = false;
    },
    iscomentdetailthumb(data) {
      const param = {
        type: 1,
        typeId: this.commentList[data.commentindex].id,
        recMsgId: this.commentList[data.commentindex].userId,
        topicId: this.discuss[0].topicId
      };
      if (this.commentList[data.commentindex].isGood == 0) {
        api.Querytopicsavegood(param).then(res => {
          if (res.success) {
            this.$util.saveFootPrint({actType:8,typeValue:this.commentList[data.commentindex].id});//用户轨迹
            if (res.isGood == 1) {
              this.commentList[data.commentindex].isGood = 1;
              this.commentList[data.commentindex].likesNumber = res.data;
            }
           
          }
        });
      } else if (this.commentList[data.commentindex].isGood == 1) {
        api.QuerytopicCanaleGood(param).then(res => {
          if (res.success) {
            if (res.isGood == 0) {
              this.commentList[data.commentindex].isGood = 0;
              this.commentList[data.commentindex].likesNumber = res.data;
            }
          }
        });
      }
    },
    isthumbup(data) {
      const param = {
        type: 0,
        typeId: this.discuss[data.commentindex].id,
        recMsgId: this.discuss[data.commentindex].userId,
        topicId: this.discuss[data.commentindex].topicId
      };
      if (this.discuss[data.commentindex].isGood == 0) {
        api.Querytopicsavegood(param).then(res => {
          if (res.success) {
            this.$util.saveFootPrint({actType:7,typeValue:this.discuss[data.commentindex].id});//用户轨迹
            this.discuss[data.commentindex].isGood = 1;
            this.discuss[data.commentindex].likesNumber = res.data;
            let topicDetailObj = JSON.parse(localStorage.topicDetailStorage);
            if(this.$route.query.topicIndex<topicDetailObj.commentlist.length){
              topicDetailObj.commentlist[this.$route.query.topicIndex].isGood=res.isGood;
              topicDetailObj.commentlist[this.$route.query.topicIndex].likesNumber=res.data;
            }
            localStorage.topicDetailStorage = JSON.stringify(topicDetailObj)
          }
        });
      } else if (this.discuss[data.commentindex].isGood == 1) {
        api.QuerytopicCanaleGood(param).then(res => {
          if (res.success) {
            this.discuss[data.commentindex].isGood = 0;
            this.discuss[data.commentindex].likesNumber = res.data;
             let topicDetailObj = JSON.parse(localStorage.topicDetailStorage);
            if(this.$route.query.topicIndex<topicDetailObj.commentlist.length){
              topicDetailObj.commentlist[this.$route.query.topicIndex].isGood=res.isGood;
              topicDetailObj.commentlist[this.$route.query.topicIndex].likesNumber=res.data;
            }
            localStorage.topicDetailStorage = JSON.stringify(topicDetailObj)
          }
        });
      }
    },
    clickcomment() {
      this.$router.push({
        path: "/publishcomments",
        query: {
          title: "发评论",
          type: "1",
          topicId: this.discuss[0].topicId,
          parentId: this.discuss[0].id,
          peplyId: this.discuss[0].userId,
          parentType: "",
          topicIndex: this.$route.query.topicIndex,
          commentId:this.$route.query.commentId,
        }
      });
    },
    deletemycomment() {
      const data = {
        type: "1",
        id: this.$route.query.commentId
      };
      api.Queryshenhe(data).then(res => {
        if (res.success) {
          if (res.data == "1") {
            this.myshenhetype = 2;
          } else if (res.data == "0") {
            this.myshenhetype = 1;
          }
        }
      });
      this.isdelete = true;
    },
    canaledeteletopiccomments() {
      this.showdelete = false;
    },
    deletetopiccomments() {
      this.showdelete = false;
      if (this.mystatus == "big") {
        if (localStorage.getItem("userId") != this.discuss[0].userId) {
          return;
        }
        const data = {
          id: this.discuss[0].id
        };
        this.$nextTick(function() {
          api.Querytopicdeletecomments(data).then(res => {
            if (res.success) {
              //非优质资源直接删除
              if(this.myshenhetype!=2){
                let temptopicDetailObj = JSON.parse(localStorage.topicDetailStorage);
                 temptopicDetailObj.commentlist.splice(this.$route.query.topicIndex,1);
                
                 let topicDetailObj = JSON.stringify({
                   commentlist: temptopicDetailObj.commentlist,
                   currPage: temptopicDetailObj.currPage,
                   totalPage: temptopicDetailObj.totalPage,
                   totalCount: temptopicDetailObj.totalCount
                 });
                localStorage.topicDetailStorage = topicDetailObj;
              }
              this.discuss.pop();
              this.$router.go(-1);
            }
          });
        });
      } else if (this.mystatus == "small") {
        if (
          localStorage.getItem("userId") != this.commentList[this.tag].userId
        ) {
          return;
        }
        const id = {
          id: this.commentList[this.tag].id
        };
        api.Querytopicdeletecomments(id).then(res => {
          if (res.success) {
            //如果删除成功，调用接口实现刷新
            const data = {
              page: this.page,
              limit: 10,
              id: this.$route.query.commentId
            };
            //将commentcounts做了修改
            api.QuerytopicCommentDetail(data).then(res => {
              if (res.success) {
                this.commentcounts = res.data.discuss[0].commentCount;
                this.commentList = res.data.commentList.list;
                this.$util.getListUrl(this.commentList);
                this.hasmore = res.hasMore;
              }
            });
          }
        });
      }
    },
    deletemycomments() {
      this.isdelete = false;
      this.showdelete = true;
      this.mystatus = "big";
    },
    iscancle() {
      this.isdelete = false;
    },
    replyotherbody(data) {
      if (
        localStorage.getItem("userId") ==
        this.commentList[data.commentindex].userId
      ) {
        this.ismyself = true;
      } else {
        this.ismyself = false;
      }
      this.isreply = true;
      this.tag = data.commentindex;
      if(this.ismyself){
        const mydata = {
          type: "1",
          id: this.commentList[data.commentindex].id
        };
        api.Queryshenhe(mydata).then(res => {
          if (res.success) {
            if (res.data == "1") {
              this.myshenhetype = 2;
            } else if (res.data == "0") {
              this.myshenhetype = 1;
            }
          }
        });
      }
    },
    replycom() {
      this.$router.push({
        path: "/publishcomments",
        query: {
          title: "发评论",
          type: "1",
          topicId: this.discuss[0].topicId,
          parentId: this.discuss[0].id,
          peplyId: this.commentList[this.tag].userId,
          parentType: this.commentList[this.tag].id,
          commentId:this.$route.query.commentId,
        }
      });
    },
    deletereply() {
      this.isreply = false;
      this.showdelete = true;
      this.mystatus = "small";
    },
    replycancle() {
      this.isreply = false;
    },
    turn2TopicDetail(topicId) {
      this.$router.push({
        path: "/topicdetail",
        query: { topicId: topicId,token:localStorage.getItem("token")}
      });
    },
    //图片自动旋转参数
    picAutoOrient(page,data) {
      for (var m = 10*page; m < data.length; m++) {
        for (var n = 0; n < data[m].picUrls.length; n++) {
          data[m].picUrls[n].src =
            data[m].picUrls[n].src + "?imageMogr2/auto-orient";
        }
      }
    },
    deleteshow(data){
        this.showdelete=data;
    },
  }
};
</script>
<style lang="less" scoped>
.modal-img{
  width: 100%;
  height: 100%;
  background: rgba(0,0,0,.5);
  position: fixed;
  top:0;
  left: 0;
  z-index: 9999;
  img{
    width: 80%;
    position: absolute;
    top:50%;
    left: 10%;
    transform: translateY(-50%);
  }
}
.allthumbcount{
  font-family: PingFangSC-Regular;
  position: absolute;
  right: 0;
  color: #999999;
  font-size: 0.3rem
}
.allcomments {
  display: flex;
  width: 100%;
  height: 0.89rem;
  background-color: white;
  line-height: 0.88rem;
  font-family: "PingFangSC Regular";
  font-size: 0.3rem;
  color: #666666;
}
.allcommentstitle{
  position: relative;
  margin-left: 0.3rem;
  width: 6.9rem;
  height: 0.88rem;
  border-bottom: 1px solid #e6e6e6;
}

.bottom-sep {
  width: 6.9rem;
  margin-left: 0.3rem;
  height: 1px;
  background-color: #e6e6e6;
}
.delete {
  height: 0.9rem;
  line-height: 0.9rem;
  font-size: 0.3rem;
  color: #333333;
  font-family: "PingFangSC Regular";
  text-align: center;
}
.cancle {
  height: 0.9rem;
  line-height: 0.9rem;
  font-size: 0.3rem;
  color: #fb685b;
  font-family: "PingFangSC Regular";
  text-align: center;
}
.topicTitle .mint-cell {
  margin: 0 0.2rem;
}
.loadmore-container {
  height: 95vh;
  overflow: hidden;
  margin: 0 auto;
}
.loadmore-ul {
  padding-bottom: 1.2rem;
  list-style: none;
}
</style>
